<template>
	<t-sticky>
		<div class="header">
			<div class="header-content">
				<t-image class="image-container" :style="{ width: '50px'}" fit="fill" :src="logoImage"></t-image>
				<t-image class="image-container" :style="{ width: '83px',height:'30px', marginLeft: '10px', display: 'inline-block'}" fit="fill" :src="logoText"></t-image>
			</div>
			<div class="right">
				<h3>10万部漫画免费读</h3>
				<div class="custom-btn" @click="getDownload">安全下载</div>
			</div>
			
			<DownloadApk :isShowDialog.sync="isShowDialog" />
		</div>
	</t-sticky>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		onMounted 
	} from 'vue';
	import logoImage from '/src/assets/logo-bai.png'
	import logoText from '/src/assets/logo-text.png'
	import DownloadApk from "./downloadApk.vue";
	const isShowDialog = ref(false);
	
  //   const preloadImages = (imageUrls) => {
		// imageUrls.forEach(url => {
		// 	const img = new Image();
		// 	img.src = url; // 触发加载，加载后会缓存
		// 	// 可选：监听加载状态（调试用）
		// 	img.onload = () => {
		// 		console.log(`图片预加载完成: ${url}`);
		// 	};
		// 	img.onerror = () => {
		// 		console.error(`图片预加载失败: ${url}`);
		// 	};
		// });
  //   };
    
  //   	// 在组件挂载时预加载图片
  //   onMounted(() => {
  //   	// 传入需要预加载的图片路径（直接使用导入的图片变量）
  //   	preloadImages([logoImage, logoText]);
  //   });
	const getDownload = (item, index) => {
		// isShowDialog.value = false;
		// // 用 nextTick 确保状态更新后再打开
		// nextTick(() => {
		// 	isShowDialog.value = true;
		// });
		const storedCode = localStorage.getItem('cartoonInviteCode');
		// 基础链接
		const baseUrl = 'http://52.74.47.75:91/';//正式
		// const baseUrl = 'http://47.104.140.61:91/';//测试
		const urlWithCode = `${baseUrl}?code=${encodeURIComponent(storedCode)}`;
		// 打开外部链接
		window.open(urlWithCode, '_blank'); // _blank表示在新窗口打开
	}
	// import { Image , Button  } from 'vant-green';
</script>

<style scoped lang="scss">
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70px;
		padding: 0 10px;
		background-color: #F1B444;
		position: relative;
		font-family: 'OPPOSans 2.0';
		.header-content {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.header-text {
				margin-left: 10px;

				h4 {
					font-size: 20px;
					color: #303133;
					letter-spacing: 4px;
				}

				p {
					font-size: 8px;
					color: #909199;
				}
			}
		}

		h3 {
			font-size: 14px;
			font-weight: normal;
			width: 60px;
			color: #000;
			font-weight: 550;
		}
	}
	.right{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: absolute;
		right: 10px ;
	}
	.custom-btn{
		// border-color: #000000 !important;
		/* 边框色（与背景色一致） */
		color: #fff;
		width: 89px;
		height: 40px;
		border-radius: 50px;
		background-color: #000000 !important;
		color: #fff !important;
		overflow: hidden  !important;
		font-size: 16px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}
</style>